<template>
	<view class="box bg-f7">
		<u-swiper :height="swiperHeight" :list="info.images" @change="bannerChange" :autoplay="false" indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ info.images?info.images.length:1}}</text>
			</view>
		</u-swiper>
        <view class="price-box bg-white">
            <view class="flex-box">
                <text class="color-red fs-24">￥ </text>
                <text class="color-red fs-46 fw-b">{{ info.price }}</text>
                <text class="color-9 fs-24 through">原价 {{info.line_price}} </text>
                <view class="flex-1"></view>
                <text class="color-70 fs-24">销量{{info.sales}}</text>
            </view>
            <view class="fs-30 fw-b  color-0">{{info.title}}</view>
        </view>
        <view class="margin-t-20 bg-white evaluate-box">
            <view class="evaluate-title align-items-center padding-l-r-30" @click="goEvaluate">
                <text class="fs-28 color-0 fw-b">商品评价</text>
                <view class="flex-1"></view>
                <text class="color-80 fs-24">全部评价</text>
                <u-icon name="arrow-right" color="#707070" size="14"></u-icon>
            </view>
            <view class="line"></view>
            <view class="padding-l-r-30 evaluate-list">
                <view v-if="evaluateList && evaluateList.length">
                    <view v-for="(item ,index) in evaluateList " class="evaluate-list-box" :key="index">
                        <view v-show="index < 2">
                            <view class="evaluate-details">
                                <view class="align-items-center">
                                    <view class="img-box">
                                        <image :src=" item.user.avatar " mode="aspectFill"></image>
                                    </view>
                                    <text class="fs-28 color-0">{{item.user.nickname}}</text>
                                </view>
                                <view class="color-4d fs-28 margin-t-20">{{item.content}}</view>
								<view v-if="item.images && item.images.length" class="margin-t-20">
									<u-album :urls=" item.images" :multipleSize='100'></u-album>
								</view>
                            </view>
                            <view class="line" v-if="evaluateList && evaluateList.length > 1 && index < 1"></view>
                        </view>
                    </view>
                </view>
               <view v-else class="flex-box flex-column align-items-center padding-t-b-30">
                   <image style="width: 300rpx;height: 300rpx" mode="aspectFill" src=""></image>
                   <text class="fs-26 color-70">暂无评论</text>
               </view>
            </view>
        </view>
        <view class="margin-t-20  bg-white">
            <view class="padding-30 fs-28 color-0 fw-b">
                商品详情
            </view>
				  <u-parse :content="info.content"></u-parse>
        </view>
		<view class="margin-t-20  bg-white">
			<view class="padding-30 fs-28 color-0 fw-b">
			    购买须知
			</view>
		</view>
        <view class="service">
            <image src='/static/image/shop/service.png' mode="aspectFill"></image>
        </view>
		<view class="bottom-nav bg-white">
			<view class="padding-l-r-30 bottom-content align-items-center justifyContent-spaceBetween">
				<view class="align-items-center">
					<view class="img-box flex-column fs-22 ma-r-60 align-items-center" @click="goPage('home')">
						<image src="/static/image/shop/icon-home.png" mode="aspectFill"></image>
						<text>主页</text>
					</view>
					<view class="img-box flex-column fs-22 align-items-center" @click="goPage('car')">
						<image src="/static/image/shop/icon-car.png" mode="aspectFill"></image>
						<text>购物车</text>
					</view>
				</view>
				<view class="fs-28 color-43 btn-box align-items-center">
					<view class="flex-1">加入购物车</view>
					<view class="flex-1 color-white bg-43" @click="buy">立即购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {getShopDetail ,getShopEvaluate} from 'api/home'
	export default {
		data() {
			return {
                evaluateList:[ ],
				swiperHeight:200,
				currentNum:0,
				info: { },

			}
		},
        onLoad(options) {
           this.id =options.id
        },
        onShow(){
            this.getShopDetail()
            this.getShopEvaluate()
        },
        methods: {
            getShopDetail( ){
                getShopDetail({goods_id:this.id}).then(res=>{
                    if (res.code ==1){
                        this.info = res.data
                        this.calculateSwiperHeight()
                    }

                })
            },
            // 评价
            getShopEvaluate(){
                let params = {
                    goods_id:this.id,
                    limit:3,
                    page:1
                }
                getShopEvaluate(params).then(res=>{
                    this.evaluateList=res.data
                })
            },
			goPage(type){
				let url = ''
				if(type=='home'){
					url='/pages/index/index'
				}else {
					url = '/pages/car/car'
				}
				uni.switchTab({
					url
				})
			},
			buy(){
				uni.setStorageSync('addressInfo' ,JSON.stringify({}))
                uni.setStorageSync('couponInfo' ,JSON.stringify({}))
				uni.navigateTo({
					url:'/pageA/shop/confirmOrder?shopId=' +  this.id
				})
			},
			goEvaluate(){
				uni.navigateTo({
					url:'/pageA/shop/evaluate?id='+ this.id
				})
			},
			//  轮播图高度
            calculateSwiperHeight(index) {
                console.log(this.info)
                const urls = this.info.images;
                const currentIndex = index || 0;
                const currentUrl = urls[currentIndex];

                wx.getImageInfo({
                    src: currentUrl,
                    success: (res) => {
                        const aspectRatio = res.height / res.width;
                        this.swiperHeight = wx.getSystemInfoSync().windowWidth * aspectRatio;
                        console.log('计算出的高度:', this.swiperHeight);
                    },
                    fail: (err) => {
                        console.error('获取图片信息失败', err);
                    }
                });
            },

			bannerChange(e) {
               this.currentNum = e.current
                this.calculateSwiperHeight(e.current)
            },
        },
	}
</script>

<style lang="scss" scoped>
	
.box {
	padding-bottom: 170rpx;
}
.price-box {
    width: 100%;
    padding: 14rpx 30rpx 35rpx;

    .flex-box {
        align-items: baseline;
    }
    .through {
        margin-left: 10rpx;
        text-decoration-line: line-through;
    }
}
.evaluate-title {
    height: 90rpx;
}
.evaluate-list {
    padding-top: 10rpx;
    .evaluate-list-box {
        &:last-child {
            .line {
                display: none;
            }
        }
    }
}
.evaluate-details {
    padding: 20rpx 0;
    .img-box {
        width: 50rpx;
        height: 50rpx;
        min-width: 50rpx;
        margin-right: 16rpx;
        border-radius: 50%;
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
        }
    }
}
.service {
    position: fixed;
    right: 20rpx;
    bottom: 200rpx;
    image {
        width: 110rpx;
        height: 110rpx;
    }
}
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 162rpx;  
	.bottom-content {
		height: 100rpx;
		box-shadow: 0  -1px 4rpx 1px rgba(0,0,0,0.08);
		.ma-r-60 {
			margin-right: 60rpx;
		}
		.img-box {
			image {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 8rpx;
			}
		}
	}
	.btn-box {
		width: 460rpx;
		height: 80rpx;
		background: #ECFCFF;
		border-radius: 14rpx ;
		border: 1px solid #43ABC4;
		text-align: center;
		line-height: 80rpx;
		overflow: hidden;
	}
}
</style>